<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="支付交易流水列表">
                    <form class="form-inline" @submit.prevent v-el:form>
                        <form-select title="商户号" :up-table="true" :sreach="true" name="mchtId" :options="mchtList"></form-select>
                        <form-input title="交易流水号" :up-table="true" name="seqNo"></form-input>
                        <form-date-time title="交易开始时间" :up-table="true" name="txnBeginDate"></form-date-time>
                        <form-date-time title="交易结束时间" :up-table="true" name="txnEndDate"></form-date-time>
                        <button type="reset" @click="reset" class="btn btn-warning pull-right">重置</button>
                        <v-button theme="primary" @click="search" class="pull-right">查询</v-button>
                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
        <modal-container title="详情" v-el:detail-modal v-ref:detail-modal class="edit-modal">
            <form @submit.prevent @reset.prevent v-el:detail-mform>
                <div class="modal-body">
                    <table class="table table-bordered table-hover">
                        <tr>
                            <td style="width:50%">交易流水号</td>
                            <td>{{item.seqNo}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">商户名称</td>
                            <td>{{item.mchtName}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">用户号</td>
                            <td>{{item.usrId}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">原交易金额</td>
                            <td>{{item.orgAmt}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">交易金额</td>
                            <td>{{item.amt}}</td>
                        </tr>

                        <tr>
                            <td style="width:50%">交易渠道</td>
                            <td>{{item.txnChl}}</td>

                        </tr>
                        <tr>
                            <td style="width:50%">交易日期</td>
                            <td>{{item.transDate}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">交易状态</td>
                            <td>{{item.txnStatus == 0 ? "正常" : "撤销"}}</td>
                        </tr>
                        <tr>
                            <td style="width:50%">使用电子券名称</td>
                            <td>{{item.coupon}}</td>
                        </tr>
                        <tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <v-button class="pull--left" data-dismiss="modal" @click="resetBindDrag">关闭</v-button>
                </div>
            </form>
        </modal-container>
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>

</style>

<script>
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"
    import summernote from "pages/partial/summernote.vue";
    var serialize = require('form-serialize');

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            mchtList: [],
            item: {},
            columnsSet: []
        }),
        methods: {
            resetBindDrag() {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            },
            getMcht() {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: '/api/v2' + projectName_Url + '/list/mcht/' + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    if(list.length == 1){
                        list.unshift({key:"商户",value:""});
                        self.$set("mchtList", list);
                    }else{
                        list.unshift({key:"所有商户",value:""});
                        self.$set("mchtList", list);
                        self.mchtIdValue = list[0].value
                    }
                },  error => {});
            },
        },
        created() {
            //datatable所用数组
            columnsSet = [{
                title: "交易流水号",
                data: "seqNo",
                className: "operate"
            }, {
                title: "商户名称",
                data: "mchtName",
                className: "operate"
            }, {
                title: "用户号",
                data: "usrId",
                className: "operate"
            }, {
                title: "原交易金额",
                data: "orgAmt",
                className: "operate"
            }, {
                title: "交易金额",
                data: "amt",
                className: "operate"
            }, {
                title: "交易渠道",
                data: "txnChl",
                className: "operate",
                render: function (data) {
                    if (data == "wechat") {
                        return data = "微信支付"
                    } else if (data == "app") {
                        return data = "移动支付"
                    } else if (data == "website") {
                        return data = "网站支付"
                    } else if (data == "ebj") {
                        return data = "点餐支付"
                    } else {
                        return data = "其他支付"
                    }
                }
            }, {
                title: "交易日期",
                data: "transDate",
                className: "operate",
                render: function (data) {
                    return dateFormat(data)
                }
            }, {
                title: "交易状态",
                data: "txnStatus",
                className: "operate",
                render: function (data) {
                    return (data == 0) ? "正常" : "撤销"
                }
            }, {
                title: "相关操作",
                className: "operate",
                render: function (value, type, row) {
                    return `
                    <button type="button" class="btn btn-defalt btn-sm detail">详情</button>
                `
                }
            }]
        },

        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2",
                startDate: "",
                endDate: ""
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            self.getMcht();

            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //对交易日期进行数据处理
                    _data.txnBeginDate = _data.txnBeginDate.replace(/-/g, "");
                    _data.txnEndDate = _data.txnEndDate.replace(/-/g, "");
                    //判断日期
                    if(_data.txnBeginDate.length>0 && _data.txnEndDate.length>0){
                        if(_data.txnBeginDate-_data.txnEndDate > 0){
                            Midway.alert({title: "操作提示", content: '交易开始时间不能大于交易结束时间'})
                            // return false
                        }
                    }else if(_data.txnBeginDate.length>0 && _data.txnEndDate.length <=0){
                        Midway.alert({title: "操作提示", content: '交易结束时间不能为空'})
                        // return false
                    }else if(_data.txnBeginDate.length <= 0 && _data.txnEndDate.length > 0){
                        Midway.alert({title: "操作提示", content: '交易开始时间不能为空'})
                        // return false
                    }
                    //发送请求
                    var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                    var result = await self.$post({
                        url: "/api/v2" + projectName_Url + "/plat/txn/payQquery/"+mchtId,
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.result || []
                    })
                }
            });
            $(self.$el).on("click", ".detail", function () {
                var Row = $(this).closest('tr').get(0);
                const dataArray = JSON.parse(JSON.stringify(dataTable.row(Row).data()));
                dataArray.transDate = dateFormat(dataArray.transDate);
                if (dataArray.txnChl == "wechat") {
                    dataArray.txnChl = "微信支付";
                } else if (dataArray.txnChl == "app") {
                    dataArray.txnChl = "移动支付";
                } else {
                    dataArray.txnChl = "其他支付";
                }
                var tmp = '';
                for (var i = 0; i < dataArray.coupon.length; i++) {
                    if(dataArray.coupon[i].couName != null){
                        tmp+= "优惠券名称:"+dataArray.coupon[i].couName+",";
                        tmp+= "券码号:"+dataArray.coupon[i].couNo+",";
                        tmp+= "张数:"+dataArray.coupon[i].couNum+",";
                    }

                }
                dataArray.coupon = tmp.substr(0,tmp.length-1);
                self.item = dataArray;
                dateTime()
                $(self.$els.detailModal).modal('show');
            });
        }
    }
</script>
